<template>
  <div class="left1">
    <div class="bt">
      <div class="tit1">{{ title }}</div>
    </div>
    <div class="leftOne" ref="chartRef"></div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts";

const title = "产业占比"

const chartRef = ref(null);
onMounted(() => {
  const chart = echarts.init(chartRef.value);

  const option = {
    legend: {
      data: ['第一产业', '第二产业', '第三产业'],
      textStyle: {
        color: "#fff"
      },
    },
    tooltip: {},
    dataset: {
      dimensions: ['product', '第一产业', '第二产业', '第三产业'],

      source: [
        {product: '2019', 第一产业: 43.3, 第二产业: 85.8, 第三产业: 93.7},
        {product: '2020', 第一产业: 83.1, 第二产业: 73.4, 第三产业: 55.1},
        {product: '2021', 第一产业: 86.4, 第二产业: 65.2, 第三产业: 82.5},
        {product: '2022', 第一产业: 72.4, 第二产业: 53.9, 第三产业: 39.1}
      ]
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      name: '单位：万元',
      nameTextStyle: {
        color: 'white'
      },
      type: 'value',
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: false,
      }
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
  };
  chart.setOption(option);
})
</script>

<style lang="scss" scoped>
.leftOne {
  height: 100%;
  margin: 25px auto auto 0;
  width: 100%
}

.left1 {
  width: 23%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: 94px;
  float: left;
}

.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}

.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}
</style>